<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2024-08-21 10:00:44
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-04-02 14:28:56
 * @FilePath: \vue-project\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <main>
    <div class="border-style"></div>

    <div class="marginTop">
      <TheWelcome
        :test="TheWelcomeProp"
        :testPorpReactive="testPorp"
        @change="changeTheWelcomeProp"
        @testEmit="testEmitFn"
      />
    </div>

    <div class="marginTop">
      <el-input placeholder="请输入" v-model="testPorp" style="width: 300px">
        <template #append>
          <el-button @click="() => (testPorp = testPorp + '1')">修改</el-button>
        </template>
      </el-input>
    </div>

    <div class="marginTop">
      <h3>自动解包</h3>
      <pre class="marginTop">{{ 'const testRef = ref(0) ' }}</pre>
      <div class="marginTop">顶级的 ref 属性才会被解包 testRef + 1: {{ testRef + 1 }}</div>
    </div>

    <div class="marginTop">
      <h3>不可以自动解包</h3>
      <pre class="marginTop">const objectRef = {{ JSON.stringify({ id: 1 }, null, 2) }}</pre>
      {{ (objectRef as any).id + 1 }} 值为[object Object]1
      <div class="marginTop">深层 ref 属性 objectRef.id + 1: {{ (objectRef as any).id + 1 }}</div>
      <div class="marginTop">
        深层 ref 属性 objectRef.id.value + 1: {{ objectRef.id.value + 1 }}
      </div>
    </div>

    <div class="marginTop">
      <h3>input v-model： {{ testInput }}</h3>
      <input :value="testInput" @input="InputTestInput" @change="changeTestInput" />
    </div>

    <div class="marginTop">
      <el-button @click="handleTestNum">点击加1</el-button>
    </div>
  </main>
</template>

<script setup lang="ts">
import TheWelcome from './component/TheWelcome.vue'
import { ElMessage } from 'element-plus'
import { ref, computed, onMounted } from 'vue'

const testPorp = ref('testPorp')
const TheWelcomeProp = ref('test文本测试')
const changeTheWelcomeProp = (txt = '测试数据') => {
  TheWelcomeProp.value = txt
}

const testEmitFn = (txt: string) => {
  ElMessage({ message: txt })
}

const testRef = ref(0)
const testRefComp = computed(() => {
  return testRef.value + 1
})
const objectRef = { id: ref(1) }

const testInput = ref('testInputText')
const InputTestInput = (e: any) => {
  testInput.value = e.target.value
  console.log('input--input输入时触发', testInput.value)
}
const changeTestInput = (e: any) => {
  testInput.value = e.target.value
  console.log('change--input失去焦点时触发', testInput.value)
}

let testN = 1
const testR = ref(1)

const test = () => {
  return testR.value
}

const testRefNum = ref(test())

const testObjRef = ref({ a: 0 })
const testObjRef1 = testObjRef

const testObjReactive = reactive({ b: 0 })
const testObjReactive1 = testObjReactive

const { b } = toRefs(testObjReactive)
const bR = toRefs(testObjReactive)
console.log('bR', bR)

const { a } = testObjRef.value

const testNumComp = computed(() => {
  return test()
})

const testNComp = computed(() => {
  return testN
})

const handleTestNum = () => {
  testN += 1
  testR.value += 1
  testObjRef.value.a += 1
  testObjReactive.b += 1
}

watch(
  () => test(),
  (newVal, oldVal) => {
    console.log('testNum 变化了', newVal, oldVal)
  },
  {
    immediate: true
  }
)

onMounted(() => {
  console.log('testRef', testRef)
  console.log('testRefComp', testRefComp)
})
</script>

<style scoped>
.marginTop {
  margin-top: 15px;
}
</style>
